<template>
  <div>

  <div class="have_look" v-for="(item, index) in creation" :key="index">
      <p>
        <span class="p-span">{{item.categoryName}}</span>
        <img src="../../assets/icon/xiayige.png" class="xiayige" alt="">
      </p>
    <div class="recommend_b">
      <div class="recommend_item" v-for="(item2,index) in item.radios" :key="index">
          <span class="recommend_span">
            <img :src="item2.picUrl" class="today_left" alt="">
          </span>
        <span class="have_look-wz">
            {{item2.name}}
        </span>
      </div>
    </div>

    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'radio',
    data() {
      return {

        radioStation:[]
      };
    },
    computed: {
      ...mapState(['creation'])
    },
    created() {

      //api 统一管理
      this.$api.getcreation()
    },
  };
</script>

<style scoped>
  .have_look{
    width: 100vw;
    height: 210px;
  }
  .have_look p{
    width: 100vw;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    line-height: 60px;
    text-indent: 5px;
    color: #424243;

  }
  .recommend_b{
    width: 100vw;
    height: 200px;
  }
  .recommend_item{
    width: 32vw;
    height: 165px;
    float: left;
    margin-left: 1vw;
  }
  .p-span{
    display: inline-block;
    height: 50px;
    position: relative;
  }
  .have_look-wz{
    display: block;
    font-size: 13px;
  }
  .xiayige{
    display: inline-block;
    width: 14px;
    height: 14px;
   vertical-align: middle;

  }
  .recommend_span{
    display: block;
    width: 32vw;
    height: 130px;
  }
  img{
    width: inherit;
    height: inherit;
    object-fit: contain;
  }


</style>
